<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
  <title>慕课网移动端响应式布局小项目</title>
  <link rel="stylesheet" type="text/css" href="./font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="./css/index.css" />

</head>
<body>
<div id="app">

  <div class="box">
    <div class="header">
      <a href="#" class="header_address">北京</a>
      <a href="#" class="header_form">
        <input ／>
      </a>
      <a href="#" class="header_message">
        <i class="fa fa-comment-o fa-lg"></i>
      </a>
    </div>
    <div class="banner">
      <div class="inner clearfix">
        <div class="innerwraper"><img src="img/banner1.jpg" alt="" /></div>
        <div class="innerwraper"><img src="img/banner2.jpg" alt="" /></div>
        <div class="innerwraper"><img src="img/banner3.jpg" alt="" /></div>
        <div class="innerwraper"><img src="img/banner4.jpg" alt="" /></div>
        <div class="innerwraper"><img src="img/banner1.jpg" alt="" /></div>
      </div>
      <div class="pagination">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="content">
      <div>
        <img src="./img/1.png"/>
        <span>Html</span>
      </div>
      <div>
        <img src="./img/2.png"/>
        <span>PHP</span>
      </div>
      <div>
        <img src="./img/3.png"/>
        <span>Android</span>
      </div>
      <div>
        <img src="./img/4.png"/>
        <span>Mysql</span>
      </div>
      <div>
        <img src="./img/5.png"/>
        <span>Java</span>
      </div>
    </div>
    <div class="title">
      <span>精品课程</span>
      <span>查看全部></span>
    </div>
    <div class="items">
      <div class="item">
        <div class="item_left"></div>
        <div class="item_center">
          <p>jQuery实战课程</p>
          <p>老师：小小小</p>
          <p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy</p>
          <p><i class="fa fa-clock-o fa-lg"></i>时间：8点半</p>
        </div>
        <div class="item_right">
          <span>3</span><em>折</em>
        </div>
      </div>
      <div class="item">
        <div class="item_left"></div>
        <div class="item_center">
          <p>微信小程序</p>
          <p>老师：小小小</p>
          <p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy</p>
          <p><i class="fa fa-clock-o fa-lg"></i>时间：3点半</p>
        </div>
        <div class="item_right">
          <span>6</span><em>折</em>
        </div>
      </div>
      <div class="item">
        <div class="item_left"></div>
        <div class="item_center">
          <p>RN实战课程</p>
          <p>老师：小小小</p>
          <p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy</p>
          <p><i class="fa fa-clock-o fa-lg"></i>时间：5点半</p>
        </div>
        <div class="item_right">
          <span>3</span><em>折</em>
        </div>
      </div>
      <div class="item">
        <div class="item_left"></div>
        <div class="item_center">
          <p>响应式布局</p>
          <p>老师：小小小</p>
          <p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy</p>
          <p><i class="fa fa-clock-o fa-lg"></i>时间：1点半</p>
        </div>
        <div class="item_right">
          <span>8</span><em>折</em>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="footericon iconactive">
      <a class="icon_a">
        <i class="fa fa-camera-retro fa-lg"></i>
      </a>
      我的
    </div>
    <div class="footericon">
      <a class="icon_a">
        <i class="fa fa-camera fa-lg"></i>
      </a>
      相机
    </div>
    <div class="footericon">
      <a class="icon_a">
        <i class="fa fa-calendar fa-lg"></i>
      </a>
      日历
    </div>
    <div class="footericon">
      <a class="icon_a">
        <i class="fa fa-camera-retro fa-lg"></i>
      </a>
      我的
    </div>
  </div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<!--<script src="../../../utils/flex2.js"></script>-->
</body>
</html>
